@import "../imports/mixins";

.jw-skin-beelden {
    @active-color: #fff;
    @inactive-color: #c7c7c7;
    @hover-color: @active-color;

    @progress-horz-gradient: linear-gradient(to bottom, rgb(201, 56, 53) 0, rgb(178, 32, 33) 50%, rgb(128, 54, 55) 100%);
    @progress-vert-gradient: linear-gradient(to right, rgb(201, 56, 53) 0, rgb(178, 32, 33) 50%, rgb(128, 54, 55) 100%);
    @buffer-gradient: linear-gradient(to bottom, #7d7d7d 0%, #868686 100%);
    @rail-gradient: linear-gradient(to bottom, #353535 0%, #434343 100%);

    @progress-color: @progress-horz-gradient;
    @buffer-color: @buffer-gradient;
    @rail-color: @rail-gradient;

    @controlbar-background-color: #6c6c6c;
    @controlbar-background-gradient: linear-gradient(to bottom,  #6c6c6c 0%,#444444 100%);
    @controlbar-background: @controlbar-background-gradient;

    @volume-padding: 0.4em;;
    @volume-background: rgba(0, 0, 0, 0.5);
    @volume-border: 1px solid #000;

    @display-icon-color: @inactive-color;
    @display-icon-hover-color: @active-color;
    @display-bkgd-color: @volume-background;
    @display-bkgd-hover-color: @controlbar-background-color;

    @cc-inactive: #7d7d7d;
    @cc-active: @active-color;

    @rail-height: .5em;
    @slider-height: @rail-height;

    @controlbar-height: 2em;

    @nextup-position-bottom: @controlbar-height + 0.7em + 0.5em;
    @nextup-position-bottom-touch: (@controlbar-height * 1.5em) + 0.7em + 0.8em;
    @nextup-position-right: 2%;
    @nextup-border-radius: 0.3em;
    @nextup-header-background: fade(@controlbar-background-color, 90%);
    @nextup-body-background: darken(fade(@controlbar-background-color, 90%), 20%);
    @nextup-body-text-color-overflow: darken(@controlbar-background-color, 20%);

    #namespace > .controlbar-height();
    #namespace > .basic-skin-styles(); // Using the above local variables
    #namespace > .touch-flag-skin-styles(); // Using the above local variables
    #namespace > .set-global-color-classes();

    .skin-element-padding();
    .inset-controlbar();

    .jw-controlbar,
    .jw-skip {
        box-shadow: inset 0px 7px 1px -5px rgba(128,128,128,1);
        border-radius: .3em;
    }

    &.jw-breakpoint-0 .jw-controlbar {
      height: 2.1em;
    }

    /* Container styles for controlbar play/pause button */
    .jw-icon-playback {
        padding-left: 0;

        &:before {
            background-color: #333;
            background: linear-gradient(
            to bottom,
            #333,
            #333 50%,
            #2e2e2e 50%,
            #2e2e2e
            );
            background-size: 100% 2px;
            border-radius: .3em;
            padding: .2em .7em;
            box-shadow: inset 0 0 1px 0px rgba(0,0,0,0.6);
            border: 1px solid #000;
            box-sizing: border-box;
        }
    }

    /* Keep the play/pause container from collapsing on toggle */
    &.jw-state-playing {
        .jw-icon-playback {
            &:before {
                padding-right: .8em;
            }
        }
    }

    /* Playlist title */
    .jw-tooltip-title {
        border-bottom: 1px solid #000;
        background-color: #282828;
    }

    /* Slider styles */
    .jw-rail,
    .jw-progress,
    .jw-buffer {
        border-radius: @ui-corner-round;
        border: 1px solid #000;
    }

    .jw-rail {
        background-color: #353535;
    }

    .jw-progress {
        background-color: #c93835;
    }

    .jw-buffer {
        background-color: #7d7d7d;
        box-shadow: inset 0 -2px 4px -1px rgba(255,255,255,0.5);
    }

    .jw-knob {
        background-color: #bbb5b7;
        box-shadow: inset 0 0px 5px 0px rgba(255,255,255,0.5);
        border: 1px solid #000;
        border-radius: 50%;
    }

    .jw-slider-horizontal {
        background: transparent;
        height: @rail-height;

        .jw-slider-container {
            height: @rail-height;
        }

        .jw-rail,
        .jw-progress,
        .jw-buffer {
            height: @rail-height;
        }

        .jw-cue {
            .vertically-centered-rail-element(@rail-height, .2em);

            background-color: #fff;
            width: .2em;
            height: .2em;
            border-radius: 1em;
        }

        .jw-knob {
            .vertically-centered-rail-element(@rail-height, .8em);

            box-sizing: border-box;
            width: .8em;
            height: .8em;
        }
    }

    .jw-slider-vertical {
        //bottom: 5px;

        .jw-slider-container {
            width: 0.4em;
        }

        .jw-rail,
        .jw-progress {
            width: .4em;
        }

        .jw-rail {
            background: rgba(0, 0, 0, 0.5);
        }

        .jw-progress {
            background: @progress-vert-gradient;
        }

        .jw-knob {
            width: .7em;
            height: .7em;
            .horizontally-centered-rail-element(0.4em, 0.7em);
        }
    }

    /* Styles for play button on idle */
    .jw-display-icon-container {
        border: @volume-border;
        box-shadow: inset 0px 0px 2px 1px rgba(255,255,255,0.3);
    }

    /* For the overlay containers */
    .jw-time-tip,
    .jw-volume-tip,
    .jw-menu,
    .jw-dock-button,
    .jw-skip {
        border-radius: @ui-padding;
    }

    .jw-toggle {
        color: @cc-active;

        &.jw-off {
            color: @cc-inactive;
        }
    }

}
